<template>
  <div class="my-course goods-list">
    <tab class="list-tab" 
        custom-bar-width="1.7rem"
        bar-active-color="#172F6D"
        >
      <tab-item selected @on-item-click="onItemClick">全部分类</tab-item>
      <tab-item @on-item-click="onItemClick">音频</tab-item>
      <tab-item @on-item-click="onItemClick">视频</tab-item>
    </tab>
    <div class="item-list" v-if="is_list && is_list.length > 0">
      <div class="item">
        <img src="@/assets/fenleiliebiao03.png" alt="">
        <i class="icon">视频</i>
        <div class="cons">
          <p class="title">「课程」 新手：魔方底棱归位</p>
          <p class="info">4.6万人已购买</p>
          <p class="price">免费</p>
        </div>
      </div><div class="item">
        <img src="@/assets/fenleiliebiao03.png" alt="">
        <i class="icon audio">视频</i>
        <div class="cons">
          <p class="title">「课程」 新手：魔方底棱归位</p>
          <p class="info">4.6万人已购买</p>
          <p class="price">¥25.55</p>
        </div>
      </div>
    </div>
    <div class="none" v-else>
      <img src="@/assets/sousuomendian04.png" alt="">
      <p>暂无相关内容</p>
    </div>
  </div>
</template>

<script>

  import { Tab, TabItem } from 'vux'

  export default {
    components: {
      Tab,
      TabItem,
    },
    data () {
      return {
        is_list: ['true'],
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      onItemClick (index) {
        console.log('on item click:', index)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.my-course
  width 100%
  height 100vh
  overflow hidden
  background-color #fff
  .list-tab
    padding-top 5rem
    .vux-tab-container
      height 5rem
      .vux-tab-item.vux-tab-selected
        font-weight bold
      .vux-tab-item
        color #000
        font-size 1.6rem
        font-weight 400
  .item-list
    margin-top .5rem
    padding 0 1.5rem
    .item
      background-color #fff
      padding 1.5rem 0
      display flex
      border-bottom 1px solid #e6e6e6
      position relative
      .icon
        position absolute
        width 4rem
        height 1.6rem
        line-height 1.6rem
        text-align center
        color #fff
        font-size 1.1rem
        background-color rgba(0,0,0,.6)
        border-radius .2rem
        left 7.8rem
        top 6.5rem
      .icon.audio
        background-color rgba(168,30,39,.8)
      img
        width 12.5rem
        height 7rem
        max-width 12.5rem
      .cons
        width calc(100% - 14rem)
        margin-left 1rem
        .title
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; 
          -webkit-box-orient: vertical;
          font-size 1.3rem
          color #333
          font-weight 500
          position relative
          left -.8rem
        .info
          color #999
          font-size 1.1rem
          margin-top 1rem
          font-weight 500
        .price
          margin-top 1rem
          font-size 1.3rem
          color #D03718
          font-weight bold
  .none
    img
      position absolute
      top 20.3rem
      width 7.25rem
      left 50%
      margin-left -3.625rem
    p
      color #666
      font-size 1.3rem
      text-align center
      position absolute
      width 100%
      top 32rem
</style>
